import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Popover, Icon,Tools } from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import ContentDelete from './ContentDelete';
import Content from './Content';
import { renderNoPermission,renderLoading } from '../../public';
import RouteModal from '../../communication/RouteModal';
const getLabel = Tools.getLabel;

/* 内容监控 */
@withRouter
@inject('centerStore')
@observer
export default class MonitorContent extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-center-content',
  }

  componentDidMount() {
    const { centerStore: { contentMonitorStore } } = this.props;
    const {  getContentList  } = contentMonitorStore;
    getContentList();
	}
	
	componentWillUnmount() {
    const { centerStore: { contentMonitorStore: { closeAllModel } } } = this.props;
    closeAllModel();
  }

  onSelect = () => {
    const { centerStore: { contentMonitorStore } } = this.props;
    const {  contentpage, setStoreState  } = contentMonitorStore;
    setStoreState({ contentvisible: false });
    if (contentpage === 'undelete') {
      setStoreState({ showContentCheck: true });
    }
  }

  render(){
    const {  prefixCls,centerStore: { contentMonitorStore } } = this.props;
    const {  setStoreState, contentvisible, contentpage,viewRight,contentLoading  } = contentMonitorStore;
    const tabBtn = [
      contentpage === 'undelete' &&
      <Popover 
        mask
        visible={contentvisible}
        overlay={[<Popover.Item>{getLabel(-81455,"批量操作")}</Popover.Item>]}
        onSelect={this.onSelect}
        onVisibleChange={contentvisible => setStoreState({ contentvisible })}
      >
        <Icon key='ellipsis' type='ellipsis' />
      </Popover>     
    ];
    
    const tabs = [
      { key: 'undelete', title: getLabel(21269, '未删除') },
      { key: 'delete', title: getLabel(18967, '已删除') },
    ];
    const tabProps = {
      onChange: (tab) => { setStoreState({ contentpage: tab.key }) },
      page: contentpage,
    };

    return contentLoading ? renderLoading : (
      <div style={{ height: '100%' }}>
      {viewRight === 0 && renderNoPermission }
      {viewRight === 1 &&
        <div className={prefixCls}>    
          <TabPage
            tabs={tabs}
            btns={tabBtn}
            tabProps={tabProps}
          />
          {contentpage === 'undelete' &&<Content/>}
          {contentpage === 'delete' &&<ContentDelete/>}
        </div>
      }
      <RouteModal/>
      </div>
    );
  }
}